<script>
import { gsap,} from 'gsap';

import { ScrollTrigger } from "gsap/ScrollTrigger";
import { ref } from 'vue';
export default{
    methods:{
        show(){
             gsap.registerPlugin(ScrollTrigger)
             ScrollTrigger.create({
             trigger:'.boxsix',
              start:'top top',
              end:'+=9000',
              scrub:true,
             pin:true,
             onUpdate(self){
              const v=document.querySelector('.video')
              v.currentTime=self.progress * v.duration
              // this.$refs.sipin.currentTime=self.*this.$refs.sipin.duration
             },
             markers:true,
             animation:gsap.timeline()
             .to('.video',{scale:1.1},'<')
            //  .fromTo('.box2',{opacity:0},{x:395,opacity:1},'<')
             })
        }
    },
    mounted(){
        this.show()
    }
}
</script>
<template>
    <div class="boxsix">
          <video class="video" ref="sipin" src="../assets/WeChat_20230803095929.mp4"
          height="785.2"
          width="1466.78">
           </video>
    </div>
</template>
<style lang="less" scoped>
.boxsix{
    position: relative;
    .video{
      position: absolute;
      top: 0;
      left: 3px;
      width: 100%;
      height: 100%;
      border-radius: 12px;
    }
}
</style>